<template>
  <div class="container">
    <div class="banner relative">
      <img :src="pageImgArr.pic01" alt />
      <div id="share" v-if="!isWeixin()" @click="shareForWechat"><img :src="pageImgArr.pic13" alt=""></div>
    </div>
    <div class="week">
      <img :src="pageImgArr.pic02" alt />
      <div class="goods-wrapper">
        <SelfItem
          :parentData="item"
          :styleData="{width:'1.92rem',padding:'0.06rem 0.06rem 0'}"
          @childEvent="goForGoodsDetail"
          v-for="(item,index) in topOrderArr.topOrder"
          :key="index"
        />
      </div>
      <img :src="pageImgArr.pic04" alt />
      <div class="scroll">
        <div class="scroll-wrapper" :style="{'width':topOrderArr.bottomOrder.length*2.07+'rem'}">
          <ScrollItem
            :parentData="item"
            :styleData="{width:'1.95rem'}"
            @childEvent="goForGoodsDetail"
            v-for="(item,index) in topOrderArr.bottomOrder"
            :key="index"
          />
        </div>
      </div>
    </div>
    <div class="tab nav" :class="{'fixed':scrollFixed}">
      <img :src="pageImgArr.pic05" alt />
      <div class="width_50_1" :class="[{'width_50_2':index!=0 },{'on':index==tabModuleArr.defaultTab}]" 
        v-for="(item,index) in tabModuleArr.moduleArr" :key="index"
        @click="getGoodsAction(item.id,index)">{{item.title}}</div>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon"></div>
    <div class="goods-list">
      <div class="top-single" v-show="tabModuleArr.defaultTab==0">
        <div
          class="goods-container"
          v-for="(item,index) in tabModuleArr.goodsListArray"
          :key="index"
          :style="[{height:index==0?'2.9rem':'3.2rem'}]"
        >
          <GoodsLineItem
            :parentData="item" v-if="item.style=='goods'"
            :orderNum="{showNum:index<3,index:index}"
            :styleData="[goodsStyle,{ marginTop:index==0?'0.15rem':'0.45rem'}]"
            @childEvent="goForGoodsDetail"
          />
          <BannerItem 
            :parentData="item" v-if="item.style=='ad'"
            :styleData="[goodsStyle,{ marginTop:index==0?'0.15rem':'0.45rem'}]"
            @childEvent="goForDetail"
          />
        </div>
      </div>
      <div class="top-team" v-show="tabModuleArr.defaultTab==1">
        <GoodsItem
          :parentData="item"
          :styleData="[goodsStyle01]"
          @childEvent="goForGoodsDetail"
          v-for="(item,index) in tabModuleArr.goodsListArray"
          :key="index"
        />
      </div>
      <img :src="pageImgArr.pic08" alt />
    </div>
    <div class="dead-line">
      <img :src="pageImgArr.pic12" alt />
    </div>
  </div>
</template>

<script>
import SelfItem from "./self.vue";
import BannerItem from 'components/GoodsItems/bannerItem.vue'
import ScrollItem from 'components/GoodsItems/scrollItem.vue'
import GoodsItem from "components/GoodsItems/lineTwo.vue";
import GoodsLineItem from "components/GoodsItems/modeOne.vue";
import { getDiscountTopApi, getDiscountGoodsListApi } from "@/apis/privateApi.js";
import RankListData from '../../../MockData/rankList.json'
import GoodsListData from '../../../MockData/goodsList.json'

export default {
  components: { SelfItem, ScrollItem, GoodsItem, GoodsLineItem, BannerItem },
  data() {
    return {
      scrollFixed: false,
      goodsStyle: { margin: "0.45rem auto 0" },
      goodsStyle01: { width: "3.12rem",padding:'0.1rem' },
      pageImgArr: {},
      activityId:'',//当前活动id
      categoryId:'',//当前分类id
      topOrderArr:{
        topOrder:[],
        bottomOrder:[]
      },//排行榜前十
      tabModuleArr: {
        defaultTab:0,
        moduleArr: [],
        goodsListArray:[]
      }
    };
  },
  created() {
    this.initPageImg();
    this.initOrderTop();
  },
  methods: {
    isWeixin(){
      /* 判断是否在微信环境 */
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
      } else {
        return false;
      }
    },
    initPageImg() {
      this.pageImgArr = {
        pic01: require("../../../assets/img/rankList/rankList01.jpg"),
        pic02: require("../../../assets/img/rankList/rankList02.jpg"),
        pic03: require("../../../assets/img/rankList/rankList03.jpg"),
        pic04: require("../../../assets/img/rankList/rankList04.jpg"),
        pic05: require("../../../assets/img/rankList/rankList05.jpg"),
        pic06: require("../../../assets/img/rankList/rankList06.jpg"),
        pic07: require("../../../assets/img/rankList/rankList07.jpg"),
        pic08: require("../../../assets/img/rankList/rankList08.jpg"),
        pic12: require("../../../assets/img/rankList/rankList12.jpg"),
        pic13: require("../../../assets/img/rankList/rankList13.png")
      };
    },
    goForDetail(item){
      //0专区 1商品 2链接
      if(item.type==0){
        this.goForSpecialDetail(item.link);
      }else if(item.type==1){
        this.goForGoodsDetail(item.link);
      }else{
        this.$navtiveUtils.jump2url(item.link)
      }
    },
    goForGoodsDetail(id) {
      this.$navtiveUtils.jump2goods(id);
    },
    goForSpecialDetail(id) {
      this.$navtiveUtils.jump2special(id);
    },
    initOrderTop(){
      let that=this;
      getDiscountTopApi().then(res =>{
        if( res.code==200 ){
          that.topOrderArr.topOrder=res.data.top.slice(0,3);//top榜前三
          that.topOrderArr.bottomOrder=res.data.bottom;
          that.activityId=res.data.activityId;
          //首次加载分类id置为默认0，tab默认-1
          that.getGoodsAction(0,-1);
        }
      })
    },
    getGoodsAction(categoryId,index) {
      let that = this ;
      that.tabModuleArr.goodsListArray=[];//清空数组
      if (this.tabModuleArr.defaultTab == index) { return false; }
      this.tabModuleArr.defaultTab = index<0 ? 0 : index;
      let tempCategoryId = categoryId ? categoryId : 0;
      getDiscountGoodsListApi(this.activityId,tempCategoryId).then(res =>{
        if(res.code==200){
          that.tabModuleArr.moduleArr=res.data.categoryList;
          that.tabModuleArr.goodsListArray=res.data.goodsList;
        }
      }) 
    },
    shareForWechat() {
      let that = this;
      let pageTitle = document.title;
      setTimeout(function() {
        that.$navtiveUtils.shareMiniProgram(
          pageTitle,
          "潮流精选好货，限时折扣中，快来抢购！",
          ""
        );
      }, 300);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background-image: url("../../../assets/img/rankList/rankList03.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
}
.relative {
  position: relative;
  #share {
    width: 1rem;
    height: 0.8rem;
    position: absolute;
    top: 0.2rem;
    right: 0;
  }
}
.nav {
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  font-size: 0.28rem;
  font-weight: 650;
  position: relative;
  div[class*="width"] {
    width: 2.8rem;
    height: 0.45rem;
    line-height: 0.45rem;
    position: absolute;
    border-radius: 0.06rem;
    top: 0.15rem;
    left: 0.45rem;
    text-align: center;
    background: #ff431e;
    &.width_50_2 {
      left: 4.25rem;
    }
    &.on {
      background: #b2da5e;
    }
  }
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
  }
}
.abandon {
  padding-top: 0.8rem;
  background: #282425;
}
.week {
  .goods-wrapper {
    display: flex;
    height: 2rem;
    position: relative;
    .goods {
      position: absolute;
    }
    .goods:nth-child(1) {
      top: -0.67rem;
      left: 2.8rem;
    }
    .goods:nth-child(2) {
      top: -0.26rem;
      left: 0.65rem;
    }
    .goods:nth-child(3) {
      top: 0.02rem;
      left: 4.95rem;
    }
  }
  .scroll {
    height: 2.8rem;
    margin: -0.15rem 0.45rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .scroll::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .scroll-wrapper {
      width: 20rem;
      display: flex;
      flex-wrap: nowrap;
    }
  }
}
.goods-list {
  .goods-container {
    width: 100%;
    height: 3.2rem;
    padding: 0.02rem 0 0;
    overflow: hidden;
    background-image: url("../../../assets/img/rankList/rankList07.jpg");
    background-repeat: repeat-y;
    background-size: 100%;
    &:first-child {
      background-image: none;
    }
  }
  .top-team {
    display: flex;
    flex-wrap: wrap;
    padding: 0.15rem 0.56rem 0;
  }
}
.more {
  .special {
    position: relative;
  }
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>